<template>
  <div
    id="carouselExampleSlidesOnly"
    class="carousel slide"
    data-bs-ride="carousel"
  >
    <div class="carousel-inner" style="max-height: 500px">
      <div class="carousel-item active">
        <img
          :src="require('@/assets/img/banner/banner-1-1280.png')"
          class="d-block w-100"
          alt="..."
          style=""
        />
      </div>
    </div>
  </div>

  <section class="case">
    <div class="container">
      <div class="row">
        <!-- 水平 -->
        <template v-for="(item, index) in resultData.rows" :key="index">
          <div
            class="col-12 bg-light shadow"
            style="padding: 40px; margin: 40px 0px; border-radius: 50px"
            data-aos="fade-right"
            data-aos-easing="linear"
            data-aos-duration="1000"
          >
            <div class="mb-3" style="">
              <div class="case-content row no-gutters">
                <div class="col-md-7 case-img text-end">
                  <img
                    :src="imgUrl(item.contentImg)"
                    alt="..."
                    class="img-fluid w-75"
                  />
                </div>
                <div class="col-md-5">
                  <div class="case-body">
                    <h5 class="case-title">{{ item.contentTitle }}</h5>
                    <div class="case-divide"></div>
                    <p class="case-description">
                      {{ item.contentDescription }}
                    </p>
                    <!-- 
                    <p class="case-text">
                      <small class="text-muted">Last updated 3 mins ago</small>
                    </p> 
                    -->

                    <!-- <button>查看详情</button> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <!-- https://img.zcool.cn/community/0173985565c1a40000008ec9f5bea8.jpg@1280w_1l_2o_100sh.jpg -->
        <!-- 水平 -->
      </div>
      <!-- 分页 -->
      <div class="row d-flex justify-content-center">
        <a-pagination
          :current="params.pageNo"
          :page-size="params.pageSize"
          :total="resultData.total"
          show-less-items
          :show-total="(total) => `总数：${total}条 `"
          @change="pageChange"
        />
      </div>
      <!-- 分页 -->
    </div>
  </section>
</template>

<script>
import { getArticleList, imgUrl } from "@/api/index.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      params: {
        categoryId: "1503549488478871554",
        contentDisplay: "0",
        pageNo: 1,
        pageSize: 5,
      },
      resultData: {
        total: 0,
        rows: [],
      },
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.getList();
    });
    //自定义方法
    const methods = {
      getList() {
        getArticleList(data.params).then((res) => {
          console.log(res.data);
          data.resultData = res.data;
        });
      },
      pageChange(page, pageSize) {
        data.params.pageNo = page;
        methods.getList();
      },
    };
    return {
      ...refData,
      ...methods,
      //图片转化
      imgUrl,
    };
  },
};
</script>
<style lang="scss" scoped>
.case {
  margin: 20px 0px;
  padding-bottom: 60px;

  .case-body {
    .case-title {
      font-weight: 500;
      font-size: 1.5rem;
      position: relative;
    }

    .case-divide {
      width: 60px;
      height: 8px;
      size: 1.5rem;
      background-color: #68a4c4;
      border-radius: 6px;
    }

    .case-keyword {
    }

    .case-description {
      font-size: 1rem;
      margin-top: 20px;
    }
  }
}
</style>
